{% extends "templates/base.html" %}

{% block class-servicios-link %} active{% endblock %}

{% block footerjs %}
    {{ block.super }}
    {% block js-after-before %}
        <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.swap-images.js"></script>
        <script type="text/javascript">
            (function($){
                $(document).ready(function () {
                    setTimeout(function() {
                        $(".after").swapImages({before: "antes", after: "despues"});
                    }, 1000);
                });
            })(jQuery);
        </script>
    {% endblock %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="alpha prefix_1 grid_22 suffix_1 omega">
            <div class="important-block">
                <div class="wrapper">
                    <div class="alpha grid_23">
                        <div class="indent-l">
                            <div class="border">
                                <div class="title"><a href="{% url template_view "servicios" %}">Servicios</a></div>
                                <ul class="list-1 columns3">
                                    {% include "templates/inc.servicios.html" %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% block content-body-wrapper %}
        <div class="alpha prefix_1 grid_15">
            <div class="border-1">
                <h2 class="p3">{% block content-title %}{% endblock %}</h2>
                {% block content-body %}{% endblock %}
            </div>
        </div>
        {% endblock %}
        {% block before-after-title-wrapper %}
        <div class="grid_7 suffix_1 omega">
            {% block before-after-title %}
                <h4 class="margin-bot">Antes y después</h4>
                <p> Pasa el <strong>ratón</strong> por encima de las imágenes (o tocalas desde tu movil o tablet) para ver el antes (casos reales)</p>
            {% endblock %}
            {% block before-after %}
            <div class="wrapper indent-bot2">
                <figure class="img-style img-indent">
                    <img src="{{ STATIC_URL }}images/limpieza_despues.jpg" class="after" />
                    <span class="afterBeforeText">Después</span>
                </figure>
                <figure class="img-style"><img src="{{ STATIC_URL }}images/periodoncia_despues2.jpg" alt="" class="after" />
                    <span class="afterBeforeText">Después</span>
                </figure>
            </div>
            <div class="wrapper indent-bot2">
                <figure class="img-style img-indent"><img src="{{ STATIC_URL }}images/limpieza_despues.jpg" alt="" class="after" />
                    <span class="afterBeforeText">Después</span>
                </figure>
                <figure class="img-style"><img src="{{ STATIC_URL }}images/periodoncia_despues2.jpg" alt="" class="after" />
                    <span class="afterBeforeText">Después</span>
                </figure>
            </div>
           {% endblock %}
        </div>
        {% endblock %}
    </div>
{% endblock %}


{% block footergallery %}
    <figure>
        <a href="{{ STATIC_URL }}images/equipo_trabajando.jpg" rel="shadowbox[servicio]" title="Equipo trabajando">
            <img src="{{ STATIC_URL }}images/equipo_trabajando.min.jpg" alt="Equipo trabajando" title="Equipo trabajando" />
        </a>
    </figure>
    <figure>
        <a href="{{ STATIC_URL }}images/equipo_trabajando2.jpg" rel="shadowbox[servicio]" title="Equipo trabajando">
            <img src="{{ STATIC_URL }}images/equipo_trabajando2.min.jpg" alt="Equipo trabajando" title="Equipo trabajando" />
        </a>
    </figure>
    <figure>
        <a href="{{ STATIC_URL }}images/patrocinio_trabajando.jpg" rel="shadowbox[servicio]" title="Patrocinio trabajando">
            <img src="{{ STATIC_URL }}images/patrocinio_trabajando.min.jpg" alt="Patrocinio diagnosticando" title="Patrocinio trabajando" />
        </a>
    </figure>
    <figure>
        <a href="{{ STATIC_URL }}images/consulta2.jpg" rel="shadowbox[servicio]" title="Imágen de la consulta">
            <img src="{{ STATIC_URL }}images/consulta2.min.jpg" alt="Imágen de la consulta" title="Imágen de la consulta" />
        </a>
    </figure>
    <figure>
        <a href="http://www.youtube.com/v/5-JuMRmbmXo?autoplay=1" rel="shadowbox[servicio]" title="Instalaciones de Patrodent">
            <img src="{{ STATIC_URL }}images/instalaciones.min.jpg" alt="Instalaciones de Patrodent" title="Instalaciones de Patrodent" />
        </a>
    </figure>
{% endblock %}
